<template>
    <div class="admin">
        <h1>金河田物业-云南旅游报名</h1>
        <div class="info">
            <label>
                <span class="label-name">日期：</span>
                <el-date-picker type="daterange" v-model="date" value-format="yyyy-MM-dd" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="change"/>
            </label>
            <el-button type="primary" @click="exportExcel">导出当前日期人员信息电子表格</el-button>
        </div>
        <div>
            <div style="margin-bottom: 10px"><el-button @click="delSelections">批量删除</el-button></div>
            <el-table ref="table" :data="tableData" border stripe>
                <el-table-column type="selection"/>
                <el-table-column prop="name" width="" label="用户名"/>
                <el-table-column prop="phone" width="" label="手机号"/>
                <el-table-column prop="address" width="" label="联系地址"/>
                <el-table-column prop="count" label="报名人数"/>
                <el-table-column width="" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row)">删除</el-button>
<!--                        <el-button @click="showImg(scope.$index)">显示照片</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display: flex;align-items: center">
            每页显示条数：
            <el-select v-model="pagesize" style="width: 60px" @change="getTableData">
                <el-option :value="10">10条</el-option>
                <el-option :value="20">20条</el-option>
                <el-option :value="50">50条</el-option>
                <el-option :value="100">100条</el-option>
            </el-select>
            <el-pagination background @size-change="sizeChange" @current-change="pageChange"
                           layout="prev, pager, next" :current-page="page" :page-size="pagesize"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                date: [this.$moment(new Date().valueOf() - 1000 * 60 * 60 * 24 * 3).format('YYYY-MM-DD'), this.$moment().format('YYYY-MM-DD')],
                community_id: '',
                tableData: [],
                communityList: [],
                showAll: false,
                page: 1,
                pagesize: 20,
                total: 0,
            }
        },
        mounted() {
            this.getTableData();
        },
        methods: {
            change(){
                this.page = 1;
                this.getTableData()
            },
            getTableData() {
                let params = {
                    page: this.page,
                    pagesize: this.pagesize,
                };
                if (this.date && this.date.length === 2) {
                    params.begin = this.date[0]+' 00:00:00';
                    params.end = this.date[1]+' 23:59:59';
                }
                this.$api.get('/api-select-tour_info', params, (res) => {
                    this.tableData = res.result;
                    this.total = res.count;
                })
            },
            exportExcel() {
                if (!this.date || this.date.length !== 2) {
                    this.$message.warning('请选择日期范围');
                    return;
                }
                let params = {
                    begin: this.date[0]+' 00:00:00',
                    end: this.date[1]+' 23:59:59',
                    community_id:this.community_id
                };
                window.open(`${window.root}/api-export-tour_info?begin=${params.begin}&end=${params.end}&community_id=${params.community_id}`)
            },
            del(row) {
                console.log(row)
                this.$confirm(`确认删除 ： ${row.name}   的录入信息？`).then(()=>{
                    this.$api.post('/api-delete-tour_info', {ids: [row.id]}, (res) => {
                        this.$message.success(res);
                        this.getTableData()
                    })
                }).catch(()=>{})
            },
            delSelections() {
                let selection=this.$refs.table.selection;
                if(selection.length<1){
                    this.$message.error('请选择需要删除的项！');
                    return;
                }
                let ids=selection.map(item=>item.id);
                let names=selection.map(item=>item.name);
                this.$confirm(`确认删除 ： ${names.join(',')}   的录入信息？`).then(()=>{
                    this.$api.post('/api-delete-tour_info', {ids}, (res) => {
                        this.$message.success(res);
                        this.getTableData()
                    })
                }).catch(()=>{})
            },
            sizeChange(val) {
                this.pagesize = val;
                this.getTableData()
            },
            pageChange(val) {
                this.page = val;
                this.getTableData();
                this.showAll=false;
            },
        }
    }
</script>
<style lang="scss">
    .admin {
        .label-name {
            display: inline-block;
            width: 100px;
            text-align: center;
        }

        & > div {
            margin-bottom: 20px;
        }

        .info {
            & > label {
                margin-right: 20px;
            }
        }
    }
    .imgPreviewer{
        width: auto!important;
        min-width: 400px;
    }
</style>
